<template>
  <div>
    <Vlogin></Vlogin>
    <h1 class="text-center">电影分享
      <!--<el-badge value="已添加" class="item">-->

      <!--</el-badge>-->
    </h1>
    <div class="container">
      <el-button @click="resetYearFilter">清除年份过滤器</el-button>
      <el-button @click="resetAreaFilter">清除地区过滤器</el-button>
      <el-button @click="resetTypeFilter">清除类型过滤器</el-button>
      <el-button @click="clearFilter">清除所有过滤器</el-button>
      <el-table
        ref="filterTable"
        :data="moviedata"
        height="730"
        style="width: 100%">
        <el-table-column prop="id" label="序号"  >
        </el-table-column>
        <el-table-column
          prop="year"
          label="年份"
          column-key="year"
          :filter-method="filterYear"
          :filters="yearList">
        </el-table-column>
        <el-table-column
          prop="area"
          label="地区"
          column-key="area"
          :filter-method="filterArea"
          :filters="areaList">
        </el-table-column>

        <el-table-column
          prop="type"
          label="类型"
          :filter-method="filterType"
          :filters="typeList">
        </el-table-column>


        <el-table-column
          prop="name"
          label="名称"
          width="360"
        >
          <template slot-scope="scope">
            <a :href="scope.row.url" title="点击查看详情页">{{scope.row.name}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="magnetic_link" label="磁力链接">
          <template slot-scope="scope">
            <a :href="scope.row.magnetic_link">磁力链接</a>
          </template>
        </el-table-column>
      </el-table>
    </div >
    <div class="text-center">
       <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageHeandle.currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total,sizes, prev, pager, next"
          :total="pageHeandle.total">
        </el-pagination>

    </div>


  </div>
  </div>

</template>

<script>
  import Vlogin from '@/components/Vlogin'

  export default {
    name: "Vmovieinfo",
    data() {
      return {
        moviedata: null,
        areaList: [],
        typeList: [],
        yearList: [],

        pageHeandle:{
          currentPage: 1,
          pageSize:10,
          total:null,
        },

      }
    },
    components: {
      Vlogin,
    },
    mounted() {
      this.handleCurrentChange(1)
    },
    methods: {
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageHeandle.pageSize= val;
        this.handleCurrentChange(1)
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        // console.log("每页显示:",this.pageHeandle.pageSize);
        this.$axios.request({
          url: this.$store.state.ip +"movieinfo/"+"?page="+val+"&size="+this.pageHeandle.pageSize,
          method: "GET",
        }).then((ret) => {
          // console.log(this.pageHeandle.pageSize ,this.pageHeandle.total,)
          this.moviedata = ret.data.moveinfo;
          this.pageHeandle.total = ret.data.total;


          var tmpArea = [];
          var tmpType = [];
          var tmpYear = [];
          for (var i = 0; i < ret.data.moveinfo.length; i++) {
            tmpArea.push(ret.data.moveinfo[i].area)
            tmpType.push(ret.data.moveinfo[i].type)
            tmpYear.push(ret.data.moveinfo[i].year)
          }

          ///去重函数
          function unique(array) {
            var res = array.filter(function (item, index, array) {
              return array.indexOf(item) === index;
            });
            return res;
          }


          //生成area列表并格式化数据
          var tmp_Area = unique(tmpArea)
          var Tmp_tmp_Area=[]
          for (var k = 0; k < tmp_Area.length; k++) {
            Tmp_tmp_Area.push({text: tmp_Area[k], value: tmp_Area[k]})
          }
          this.areaList=Tmp_tmp_Area

          //生成type列表并格式化数据
          var tmp_Type = unique(tmpType)
          var Tmp_tmp_Type=[]
          for (var index = 0; index < tmp_Type.length; index++) {
            Tmp_tmp_Type.push({text: tmp_Type[index], value: tmp_Type[index]})
          }
          this.typeList=Tmp_tmp_Type

          //生成year列表并格式化数据
          var tmp_Year = unique(tmpYear)
          var Tmp_tmp_Year = []
          for (var index = 0; index < tmp_Year.length; index++) {
            Tmp_tmp_Year.push({text: tmp_Year[index], value: tmp_Year[index]})
          }
          this.yearList=Tmp_tmp_Year
        })
      },

      resetYearFilter() {
        this.$refs.filterTable.clearFilter('year');
      },
      resetTypeFilter() {
        this.$refs.filterTable.clearFilter('type');
      },
      resetAreaFilter() {
        this.$refs.filterTable.clearFilter('area');
      },

      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },

      filterArea(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      filterType(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      filterYear(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },

    },

  }
</script>

<style scoped>

</style>
